{% extends 'layouts/blank.html' %}

{% block content %}
<div class="" x-data="{ show_tag_name_modal: false, show_preview_modal: false, show_delete_pdf_modal: false }">
    <div class="flex flex-col md:flex-row md:justify-start"
         :class="{ 'opacity-15': show_tag_name_modal || show_preview_modal || show_delete_pdf_modal }">
        <div class="w-full! md:w-72! lg:w-72! px-4 pt-2">
          {% include 'includes/sidebar.html' %}
        </div>
        <div class="flex w-full justify-center md:px-8 p-2">
            <div class="{% if layout == 'Compact' %} w-full md:w-[71%] min-[850px]:w-[80%] lg:w-[90%]! md:ml-48 min-[850px]:ml-40! lg:ml-0!
                        {% else %} w-full md:w-[78%] min-[850px]:w-[90%]! lg:w-[90%]!
                        {% endif %}
                        pb-4">
                {% if search_query or tag_query %}
                {% include 'includes/pdf_overview/search_filters.html' %}
                {% endif %}

                {% if not page_obj %}
                <div class="pt-4 *:flex *:justify-center">
                    {% if search_query or tag_query or special_pdf_selection %}
                    <span class="text-2xl">There aren't any PDFs matching the current filters</span>
                    <span class="pt-4 text-lg">Please try different filters.</span>
                    {% else %}
                    <span class="text-2xl">You have no PDFs yet</span>
                    <span class="pt-4 text-lg">
                      Get started by <a class="text-primary hover:text-secondary hover:underline px-1" href="{% url 'add_pdf' %}">adding</a> PDFs.
                    </span>
                    {% endif %}
                </div>
                {% else %}
                {% include 'includes/pdf_overview/overview_page.html' %}
                {% endif %}
            </div>
        </div>
    </div>
    <div x-show="show_tag_name_modal" x-cloak
         @click.away="show_tag_name_modal = false; $refs.edit_tag_inner.remove()"
         @keyup.escape.window="show_tag_name_modal = false; $refs.edit_tag_inner.remove()"
         class="fixed inset-x-0 top-40  mx-auto my-auto w-80 h-52 z-20">
        <div id="edit_tag"></div>
    </div>
    <div x-show="show_preview_modal" x-cloak
         @click.away="show_preview_modal = false; $refs.preview_inner.remove()"
         @keyup.escape.window="show_preview_modal = false"
         class="fixed inset-x-0 top-40 mx-auto my-auto w-80! lg:w-[28rem]! z-20">
        <div id="preview"></div>
    </div>
    <div x-show="show_delete_pdf_modal" x-cloak
         @click.away="show_delete_pdf_modal = false"
         @keyup.escape.window="show_delete_pdf_modal = false"
         class="fixed inset-x-0 top-40 mx-auto my-auto w-80! lg:w-[28rem]! z-20">
        <div id="delete_pdf_modal"></div>
    </div>
</div>

{% endblock %}
